<template>
    <el-container>
        <el-header>Header</el-header>
        <el-container>
            <el-aside width="200px">
                <el-menu default-active="2" class="sidebar-menu" background-color="#222222" text-color="#fff" active-text-color="#fff">        
                    <div v-for="(menu,index) in menus" :key="index">
                        <el-menu-item v-if="!!menu['url']" :index="menu.url" :route="menu.url" v-show="menu.show">
                            <i class="fa fa-`${menu.icon}` fa-lg menu-icon'"></i>
                            <span slot="title">{{ menu.title }}</span>
                        </el-menu-item>
                        <el-submenu>
                            <template slot="title">
                                <i class="fa fa-'+ menu.icon +' fa-lg menu-icon'"></i>
                                <span slot="title">{{ menu.title }}</span>
                            </template>
                            <div v-for="(menu,subIndex) in menus.submenus" :key="subIndex">
                                <el-menu-item>
                                    <i class="fa fa-'+ menu.icon +' fa-lg menu-icon'"></i>
                                    <span slot="title">{{ menu.title }}</span>
                                </el-menu-item>
                            </div>
                        </el-submenu>
                    </div>
                </el-menu>
            </el-aside>
            <el-main>主页面</el-main>
        </el-container>
    </el-container>
</template>
<script>
var menus = [
    {
        url: "/default",
        icon: "bank",
        title: "欢迎页"
    },
    {
        url: "/charts",
        icon: "bank",
        title: "数据统计",
        submenus : [
            {
                url: "/charts1",
                icon: "bank",
                title: "示例1"
            }
        ]
    }
];
export default {
    name : 'default',
    data (){
        return {
            menus : menus
        };
    }
}
</script>
<style lang="scss" scoped>
.sidebar-menu {
    border-right: none;
    .is-active {
        background-color: #409eff !important;
    }
}

.sidebar-menu:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
}
.el-menu--collapse .el-submenu .el-submenu__title span {
    height: 0;
    width: 0;
    overflow: hidden;
    visibility: hidden;
    display: inline-block;
}
</style>